<html xmlns='http://www.w3.org/1999/xhtml' >
<head>
  <title>pn.ui.filter.TableFilter</title>
  <script src='http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js' type='text/javascript'></script>            
  <script type='text/javascript' src='picnet.table.filter.min.js'></script>    
  <link rel="stylesheet" href="css/demo.css"> 
  
    <script type='text/javascript'>
        $(document).ready(function() {
            //  Randomly Create Data Rows
            for (var i = 0; i < 50; i++) {
              var tr = $('<tr>' +
                '<td>Value' + Math.floor(Math.random() * 500) + '</td>' +
                '<td>' + Math.floor(Math.random() * 500) + ' </td>' +
                '<td>' + (Math.random() > 0.5 ? 'yes' : 'no') + '</td>' +
                '<td>' + (Math.random() <= 0.333 ? 'Item 1' : Math.random() > 0.5 ? 'Item 2' : 'Item 3') + '</td>' +
                '<td></td>' +
                '<td>' + parseInt(10 + Math.random() * 18) + '/' + parseInt(10 + Math.random() * 2) + '/2009</td>' +
                '<td></td>' +
                '</tr>');
              $('#demotable1 tbody').append(tr);
            }

          for (var i = 0; i < 50; i++) {
            var tr = $('<tr><td>Value(2) ' + Math.floor(Math.random() * 500) + '</td></tr>');
            $('#demotable2 tbody').append(tr);
          }

          // Initialise Plugin
            var options1 = {
                additionalFilterTriggers: [$('#onlyyes'), $('#onlyno'), $('#quickfind')],
                clearFiltersControls: [$('#cleanfilters')],
                matchingRow: function(state, tr, textTokens) {
                  if (!state || !state.id) {
                    return true;
                  }
                  var child = tr.children('td:eq(2)');
                  if (!child) return true;
                  var val = child.text();
                  switch (state.id) {
                  case 'onlyyes':
                    return state.value !== true || val === 'yes';
                  case 'onlyno':
                    return state.value !== true || val === 'no';
                  default:
                    return true;
                  }
                }
            };

            $('#demotable1').tableFilter(options1);
      
           var grid2 = $('#demotable2');
           var options2 = {                
        
           filteringRows: function(filterStates) {
                grid2.addClass('filtering');
              },
              filteredRows: function(filterStates) {
                grid2.removeClass('filtering');
                setRowCountOnGrid2();
              }
            };      
     
            function setRowCountOnGrid2() {
              var rowcount = grid2.find('tbody tr:not(:hidden)').length;
              $('#rowcount').text('(Rows ' + rowcount + ')');
            }

            grid2.tableFilter(options2); // No additional filters      
            setRowCountOnGrid2();
        });
    </script>
<style type='text/css'>
body {

  }
h3 {
  font-size:1em;
  }
.wrapper {
  width:640px;
  margin:0 auto;
  }
.header {
  width:640px;
  margin-bottom:20px;
  padding-bottom:10px;
  border-bottom:1px solid #ddd;
  }
.content {
  font-size:8pt;
  clear:both;
  }
.header,
.picnet_logo, 
.instructions,
.column1,
.column2 {
  display:inline;
  position:relative;
  float:left;
  }

table,
td,
th {
  border: solid 1px silver;
  color:#666;
  padding:5px;
  font-size:8pt;
  }
table {
  border-collapse:collapse;
  }
table tr {
  background-color:#eee;
  }

table td, table th{
    border:1px solid #fff;}
.column1 {
  width:480px
  }
.column2{
  width:100px;
  margin-left:60px;
  }
table#demotable2 {
  width:100px;
}
th {
  background-color:#333;
  color:#fff;
  font-size:0.85em
  }
a {
  color:#0079c1;
  text-decoration:none;
  }  
a:hover {
  text-decoration:underline;
  }
.filtering {
  background-color:light-gray
  }
#jqtf_filters {
  list-style:none;  
  }
#jqtf_filters li {
  display:inline-block; 
  position:relative; 
  float:left;
  margin-bottom:20px
  }
#quickfind {
  width:480px;
  border:1px solid #ccc;
  }
.clear {
  clear:both
  }
hr {
  margin-top:20px;
  border:1px dotted #eee;
  width:640px;
  }
#cleanfilters {
  margin-left:20px;
  }
  
</style>
</head>
<body>  
<div class='wrapper'>
  <div class='header'>
    <div class='picnet_logo'>
    </div>  
    <div class='instructions'>
    <h2>pn.ui.filter.TableFilter</h2>
    <p>
    Filter through the cells by typing in the input fields at the top of the columns. You can also filter using a dropdown list, checkboxes and a search bar. 
    <br/>For more information visit the
    <a href='http://www.picnet.com.au/picnet_table_filter.html' target='_blank' title='Opens in a new window'>Plugin Page</a> or <a href='http://www.picnet.com.au/contact_us.html' target='_blank' title='Opens in a new window'>contact us</a>.
    </p>
    </div>
  </div>
  <div class='content'>
    <h3>Additional Filters for Table 1</h3>
    Only Show Yes: <input type='checkbox' id='onlyyes'/>          
    Only Show No: <input type='checkbox' id='onlyno'/>
         &nbsp;<input type='submit' value='Set Quick Find filter and refresh table' onclick="$('#quickfind').val('12'); $('#demotable1').tableFilterApplyFilterValues();"/>
    <br/>      <br/>    
    Quick Find: <input type='text' id='quickfind'/>

    <a id='cleanfilters' href='#'>Clear Filters</a>
    <div class='clear'></div>
    <br/>
    <div class='column1'>  
      <h3>Table 1</h3>
      <table id='demotable1'>
        <thead>
          <tr><th>Text Column 1</th><th>Number Column</th><th>Yes/No Column</th><th filter-type='ddl'>List Column</th><th filter='false'>No Filter</th><th>Date Column</th><th filter='false'>Empty</th></tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>
    
    <div class='column2'>  
      <h3>Table 2 <span id='rowcount'></span></h3>
      <table id='demotable2'>
        <thead>
          <tr><th>Text Column 2</th></tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>  
    <div class='clear'></div>
    <hr/>
    <p>This plugin was developed by <a href='mailto:guido.tapia@picnet.com.au'>Guido Tapia</a> - <a href='http://www.picnet.com.au/software_development.html'>Software Development</a> manager at <a href='http://www.picnet.com.au'>PicNet</a>.</p>
  </div>
</div>
  </body>
</html>